.bui-tag {
  --tag-color: var(--bui-tag-color, var(--bui-color-gray));
  --tag-border-color: var(--bui-tag-border-color, var(--bui-color-border-gray));
  --tag-bg-color: var(--bui-tag-bg-color, var(--bui-color-gray));
  --tag-height: var(--bui-tag-height, 15px);
  --tag-line-height: var(--bui-tag-line-height, 15px);
  --tag-padding: var(--bui-tag-padding, 0 var(--bui-spacing-xs));
  --tag-bg-color-vip: var(--bui-tag-color-vip, fade(#ff866e, 30%));

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  height: var(--tag-height);
  line-height: var(--tag-line-height);
  padding: var(--tag-padding);
  font-size: var(--bui-text-size-5);
  font-weight: var(--bui-font-weight-normal);
  border-radius: var(--bui-shape-radius-label);
  border: 1px solid transparent;
  box-sizing: border-box;
  color: var(--bui-color-bg-view);
  font-family: var(--bui-font-family);
  // 描边
  &-outlined {
    color: var(--tag-color);
    border: 1px solid var(--tag-border-color);

    &.bui-tag-primary {
      color: var(--bui-color-primary);
      border: 1px solid var(--bui-color-border-primary);
    }

    &.bui-tag-info {
      color: var(--bui-color-info);
      border: 1px solid var(--bui-color-border-info);
    }

    &.bui-tag-warning {
      color: var(--bui-color-warning);
      border: 1px solid var(--bui-color-border-warning);
    }

    &.bui-tag-success {
      color: var(--bui-color-success);
      border: 1px solid var(--bui-color-border-success);
    }

    &.bui-tag-danger {
      color: var(--bui-color-danger);
      border: 1px solid var(--bui-color-border-danger);
    }

    &.bui-tag-vip {
      color: var(--bui-color-red);
      border: 1px solid var(--bui-color-border-primary);
    }
  }

  // 实心
  &-contained {
    background-color: var(--tag-bg-color);

    &.bui-tag-primary {
      background-color: var(--bui-color-primary);
    }

    &.bui-tag-info {
      background-color: var(--bui-color-info);
    }

    &.bui-tag-warning {
      background-color: var(--bui-color-warning);
    }

    &.bui-tag-success {
      background-color: var(--bui-color-success);
    }

    &.bui-tag-danger {
      background-color: var(--bui-color-danger);
    }

    &.bui-tag-vip {
      background-color: var(--bui-color-vip);
    }
  }

  &-light {
    background-color: var(--bui-color-gray-light);
    color: var(--bui-color-gray);

    &.bui-tag-primary {
      background-color: var(--bui-color-primary-light);
      color: var(--bui-color-primary);
    }

    &.bui-tag-info {
      background-color: var(--bui-color-info-light);
      color: var(--bui-color-info);
    }

    &.bui-tag-warning {
      background-color: var(--bui-color-warning-light);
      color: var(--bui-color-warning);
    }

    &.bui-tag-success {
      background-color: var(--bui-color-success-light);
      color: var(--bui-color-success);
    }

    &.bui-tag-danger {
      background-color: var(--bui-color-danger-light);
      color: var(--bui-color-danger);
    }

    &.bui-tag-vip {
      background-color: var(--tag-bg-color-vip);
      color: var(--bui-color-vip);
    }
  }
}
